<template><div><h2 id="表单弹窗" tabindex="-1"><a class="header-anchor" href="#表单弹窗"><span>表单弹窗</span></a></h2>
<h2 id="数据表单弹窗" tabindex="-1"><a class="header-anchor" href="#数据表单弹窗"><span>数据表单弹窗</span></a></h2>
<p>通过<code v-pre>Form::dialog</code>方法可以快速构建一个基于数据表单的表单弹窗，仅需增加数行代码。</p>
<blockquote>
<p>表单弹窗的实现原理是：通过<code v-pre>create</code>和<code v-pre>edit</code>页面获取构建好的表单<code v-pre>HTML</code>字符，然后使用弹窗插件把这部分<code v-pre>HTML</code>字符渲染出来。<br>
如果期间需要加载新的<code v-pre>js</code>脚本，则会等待脚本加载完毕再执行表单初始化<code v-pre>js</code>代码。</p>
</blockquote>
<h3 id="简单示例" tabindex="-1"><a class="header-anchor" href="#简单示例"><span>简单示例</span></a></h3>
<h4 id="开启表单弹窗" tabindex="-1"><a class="header-anchor" href="#开启表单弹窗"><span>开启表单弹窗</span></a></h4>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Http<span class="token punctuation">\</span>Controllers<span class="token punctuation">\</span>Controller</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Form</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Layout<span class="token punctuation">\</span>Content</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">ModalFormController</span> <span class="token keyword">extends</span> <span class="token class-name">Controller</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">index</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Content</span> <span class="token variable">$content</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$content</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">header</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Modal Form'</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">body</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">build</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">build</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">dialog</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'新增角色'</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">click</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.create-form'</span><span class="token punctuation">)</span> <span class="token comment">// 绑定点击按钮</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">url</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'auth/roles/create'</span><span class="token punctuation">)</span> <span class="token comment">// 表单页面链接，此参数会被按钮中的 “data-url” 属性替换。。</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">width</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'700px'</span><span class="token punctuation">)</span> <span class="token comment">// 指定弹窗宽度，可填写百分比，默认 720px</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">height</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'650px'</span><span class="token punctuation">)</span> <span class="token comment">// 指定弹窗高度，可填写百分比，默认 690px</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Dcat.reload()'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 新增成功后刷新页面</span></span>
<span class="line"></span>
<span class="line">        <span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">dialog</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'编辑角色'</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">click</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.edit-form'</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Dcat.reload()'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 编辑成功后刷新页面</span></span>
<span class="line"></span>
<span class="line">        <span class="token comment">// 当需要在同个“class”的按钮中绑定不同的链接时，把链接放到按钮的“data-url”属性中即可</span></span>
<span class="line">        <span class="token variable">$editPage</span> <span class="token operator">=</span> <span class="token function">admin_base_path</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'auth/roles/1/edit'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token string double-quoted-string">"</span>
<span class="line">&lt;div style='padding:30px 0'></span>
<span class="line">    &lt;span class='btn btn-success create-form'> 新增表单弹窗 &lt;/span> &amp;nbsp;&amp;nbsp;</span>
<span class="line">    &lt;span class='btn btn-blue edit-form' data-url='<span class="token interpolation"><span class="token punctuation">{</span><span class="token variable">$editPage</span><span class="token punctuation">}</span></span>'> 编辑表单弹窗 &lt;/span></span>
<span class="line">&lt;/div></span>
<span class="line">"</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="表单构建以及保存数据" tabindex="-1"><a class="header-anchor" href="#表单构建以及保存数据"><span>表单构建以及保存数据</span></a></h4>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Repositories<span class="token punctuation">\</span>Role</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Controllers<span class="token punctuation">\</span>HasResourceActions</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Form</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Layout<span class="token punctuation">\</span>Content</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Admin</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">RoleController</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">use</span> <span class="token package">HasResourceActions</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">         * Edit interface.</span>
<span class="line">         *</span>
<span class="line">         * <span class="token keyword">@param</span> <span class="token class-name"><span class="token keyword">mixed</span></span>   <span class="token parameter">$id</span></span>
<span class="line">         * <span class="token keyword">@param</span> <span class="token class-name">Content</span> <span class="token parameter">$content</span></span>
<span class="line">         *</span>
<span class="line">         * <span class="token keyword">@return</span> <span class="token class-name">Content</span></span>
<span class="line">         */</span></span>
<span class="line">        <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">edit</span><span class="token punctuation">(</span><span class="token variable">$id</span><span class="token punctuation">,</span> <span class="token class-name type-declaration">Content</span> <span class="token variable">$content</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token punctuation">{</span></span>
<span class="line">            <span class="token keyword">return</span> <span class="token variable">$content</span></span>
<span class="line">                <span class="token operator">-></span><span class="token function">header</span><span class="token punctuation">(</span><span class="token function">trans</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'admin.roles'</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">                <span class="token operator">-></span><span class="token function">description</span><span class="token punctuation">(</span><span class="token function">trans</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'admin.edit'</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">                <span class="token operator">-></span><span class="token function">body</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">form</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">edit</span><span class="token punctuation">(</span><span class="token variable">$id</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">        <span class="token doc-comment comment">/**</span>
<span class="line">         * Create interface.</span>
<span class="line">         *</span>
<span class="line">         * <span class="token keyword">@param</span> <span class="token class-name">Content</span> <span class="token parameter">$content</span></span>
<span class="line">         *</span>
<span class="line">         * <span class="token keyword">@return</span> <span class="token class-name">Content</span></span>
<span class="line">         */</span></span>
<span class="line">        <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">create</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Content</span> <span class="token variable">$content</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token punctuation">{</span></span>
<span class="line">            <span class="token keyword">return</span> <span class="token variable">$content</span></span>
<span class="line">                <span class="token operator">-></span><span class="token function">header</span><span class="token punctuation">(</span><span class="token function">trans</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'admin.roles'</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">                <span class="token operator">-></span><span class="token function">description</span><span class="token punctuation">(</span><span class="token function">trans</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'admin.create'</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">                <span class="token operator">-></span><span class="token function">body</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">form</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * Make a form builder.</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@return</span> <span class="token class-name">Form</span></span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">form</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Role</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Form</span> <span class="token variable">$form</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'id'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'ID'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">            <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'slug'</span><span class="token punctuation">,</span> <span class="token function">trans</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'admin.slug'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">required</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">prepareForSave</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                <span class="token keyword">return</span> <span class="token variable">$value</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">,</span> <span class="token function">trans</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'admin.name'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">required</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">            <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">tree</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'permissions'</span><span class="token punctuation">)</span></span>
<span class="line">                <span class="token operator">-></span><span class="token function">nodes</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                    <span class="token variable">$permissionModel</span> <span class="token operator">=</span> <span class="token function">config</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'admin.database.permissions_model'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                    <span class="token variable">$permissionModel</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token variable">$permissionModel</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">                    <span class="token keyword">return</span> <span class="token variable">$permissionModel</span><span class="token operator">-></span><span class="token function">allNodes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line">                <span class="token operator">-></span><span class="token function">customFormat</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$v</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token variable">$v</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">                    <span class="token keyword">return</span> <span class="token function">array_column</span><span class="token punctuation">(</span><span class="token variable">$v</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'id'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">            <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'created_at'</span><span class="token punctuation">,</span> <span class="token function">trans</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'admin.created_at'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'updated_at'</span><span class="token punctuation">,</span> <span class="token function">trans</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'admin.updated_at'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="效果" tabindex="-1"><a class="header-anchor" href="#效果"><span>效果</span></a></h4>
<p><img src="https://cdn.learnku.com/uploads/images/202004/26/38389/bFfeudPwvS.png!large" alt=""></p>
<h3 id="功能接口" tabindex="-1"><a class="header-anchor" href="#功能接口"><span>功能接口</span></a></h3>
<p>表单弹窗必须绑定一个可点击的页面元素，通过点击这个元素弹出弹窗。</p>
<h4 id="设置弹窗标题" tabindex="-1"><a class="header-anchor" href="#设置弹窗标题"><span>设置弹窗标题</span></a></h4>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$modal</span> <span class="token operator">=</span> <span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">dialog</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'标题'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="绑定点击按钮" tabindex="-1"><a class="header-anchor" href="#绑定点击按钮"><span>绑定点击按钮</span></a></h4>
<p>通过<code v-pre>ModalForm::click</code>方法可以绑定点击按钮，绑定后当点击该按钮时会弹出弹窗</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">dialog</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'标题'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">click</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'#click-button'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="设置url" tabindex="-1"><a class="header-anchor" href="#设置url"><span>设置URL</span></a></h4>
<p>如果是创建类型的表单，则可以通过以下方法设置获取表单模板的url</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">dialog</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'新增角色'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">click</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.create-form'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">url</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'auth/roles/create'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果是编辑类型的表单，则需要多个url，因为点击每个按钮弹出弹窗的表单内容是不同的，所以每个按钮的链接也不同。</p>
<p>这个时候通过<code v-pre>ModalForm::url</code>方法设置的一个链接已经无法满足需求了，因而需要在点击按钮的<code v-pre>data-url</code>属性上保存url：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">dialog</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'编辑角色'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">click</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.edit-form'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Dcat.reload()'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 编辑成功后刷新页面</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 当需要在同个“class”的按钮中绑定不同的链接时，把链接放到按钮的“data-url”属性中即可</span></span>
<span class="line">    <span class="token variable">$editPage1</span> <span class="token operator">=</span> <span class="token function">admin_base_path</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'auth/roles/1/edit'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token variable">$editPage2</span> <span class="token operator">=</span> <span class="token function">admin_base_path</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'auth/roles/2/edit'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">return</span> <span class="token string double-quoted-string">"</span>
<span class="line">&lt;div style='padding:30px 0'></span>
<span class="line">    &lt;span class='btn btn-blue edit-form' data-url='<span class="token interpolation"><span class="token punctuation">{</span><span class="token variable">$editPage1</span><span class="token punctuation">}</span></span>'> 编辑表单弹窗1 &lt;/span></span>
<span class="line">    &lt;span class='btn btn-blue edit-form' data-url='<span class="token interpolation"><span class="token punctuation">{</span><span class="token variable">$editPage2</span><span class="token punctuation">}</span></span>'> 编辑表单弹窗2 &lt;/span></span>
<span class="line">&lt;/div></span>
<span class="line">"</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="表单保存成功回调" tabindex="-1"><a class="header-anchor" href="#表单保存成功回调"><span>表单保存成功回调</span></a></h4>
<p>通过<code v-pre>success</code>方法可以设置表单保存成功之后执行的<code v-pre>js</code>代码，在这段<code v-pre>js</code>代码作用域内有一个<code v-pre>response</code>变量，通过这个变量可以获取服务端返回的<code v-pre>json</code>数据。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">dialog</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'编辑角色'</span><span class="token punctuation">)</span></span>
<span class="line">   <span class="token operator">-></span><span class="token function">click</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.edit-form'</span><span class="token punctuation">)</span></span>
<span class="line">   <span class="token operator">-></span><span class="token function">success</span><span class="token punctuation">(</span></span>
<span class="line">       <span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token constant">JS</span></span>
<span class="line"><span class="token comment">// 打印服务端响应数据             </span></span>
<span class="line">console<span class="token operator">.</span><span class="token function">log</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 提示成功信息</span></span>
<span class="line">Dcat<span class="token operator">.</span><span class="token function">success</span><span class="token punctuation">(</span>response<span class="token operator">.</span><span class="token class-name">message</span> <span class="token operator">||</span> <span class="token string single-quoted-string">'保存成功'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 保存成功之后刷新页面</span></span>
<span class="line">Dcat<span class="token operator">.</span><span class="token function">reload</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token constant">JS</span>        </span>
<span class="line">   <span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="表单保存失败回调" tabindex="-1"><a class="header-anchor" href="#表单保存失败回调"><span>表单保存失败回调</span></a></h4>
<p>通过<code v-pre>error</code>方法可以设置表单保存失败之后执行的<code v-pre>js</code>代码，在这段<code v-pre>js</code>代码作用域内有一个<code v-pre>response</code>变量，通过这个变量可以获取服务端返回的<code v-pre>json</code>数据。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">dialog</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'编辑角色'</span><span class="token punctuation">)</span></span>
<span class="line">   <span class="token operator">-></span><span class="token function">click</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.edit-form'</span><span class="token punctuation">)</span></span>
<span class="line">   <span class="token operator">-></span><span class="token function">error</span><span class="token punctuation">(</span></span>
<span class="line">       <span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token constant">JS</span></span>
<span class="line"><span class="token comment">// 打印服务端响应数据       </span></span>
<span class="line">console<span class="token operator">.</span><span class="token function">log</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token constant">JS</span>        </span>
<span class="line">   <span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="表单保存之后回调" tabindex="-1"><a class="header-anchor" href="#表单保存之后回调"><span>表单保存之后回调</span></a></h4>
<p>通过<code v-pre>saved</code>方法可以设置表单保存之后执行的<code v-pre>js</code>代码，在这段<code v-pre>js</code>代码作用域内有两个<code v-pre>js</code>变量：</p>
<ul>
<li><code v-pre>success</code> 值为真表示保存成功，否则失败</li>
<li><code v-pre>response</code> 服务端返回的<code v-pre>json</code>数据</li>
</ul>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">dialog</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'编辑角色'</span><span class="token punctuation">)</span></span>
<span class="line">   <span class="token operator">-></span><span class="token function">click</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.edit-form'</span><span class="token punctuation">)</span></span>
<span class="line">   <span class="token operator">-></span><span class="token function">saved</span><span class="token punctuation">(</span></span>
<span class="line">       <span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token constant">JS</span></span>
<span class="line"><span class="token comment">// 打印服务端响应数据       </span></span>
<span class="line">console<span class="token operator">.</span><span class="token function">log</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">if</span> <span class="token punctuation">(</span>success<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    console<span class="token operator">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'保存成功'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></span>
<span class="line">    console<span class="token operator">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'保存失败'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token constant">JS</span>        </span>
<span class="line">   <span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="强制刷新" tabindex="-1"><a class="header-anchor" href="#强制刷新"><span>强制刷新</span></a></h4>
<p>每次点击按钮都重新从服务端拉取新的模板数据</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">dialog</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'编辑角色'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">click</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.edit-form'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">forceRefresh</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="设置弹窗宽高" tabindex="-1"><a class="header-anchor" href="#设置弹窗宽高"><span>设置弹窗宽高</span></a></h4>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">dialog</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'编辑角色'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">click</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.edit-form'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">dimensions</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'50%'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'400px'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 或</span></span>
<span class="line"><span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">dialog</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'编辑角色'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">click</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.edit-form'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">width</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'50%'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">height</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'400px'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="工具表单弹窗" tabindex="-1"><a class="header-anchor" href="#工具表单弹窗"><span>工具表单弹窗</span></a></h2>
<p>数据表单的弹窗功能通常需要结合一个资源控制器去实现，相对会比较复杂一点，所以系统也内置了另外一种更简便的表单弹窗功能，使用方法请参考<a href="https://learnku.com/docs/dcat-admin/1.x/tools-form/8125#modal" target="_blank" rel="noopener noreferrer">工具表单-弹窗</a>。</p>
<p><img src="https://cdn.learnku.com/uploads/images/202004/26/38389/MZIdO6PrwR.png!large" alt=""></p>
</div></template>


